<template>
    <div>
        <el-button @click="handler">C子组件数据同步</el-button>
        {{xxx}}
    </div>
</template>

<script  setup>

    import {ref, reactive, defineProps, defineComponent, defineEmits, defineExpose, watch,onMounted} from 'vue'
    // const obj = defineProps(['count',"str",'people',"hobby"]) // 父传子
    // obj 是一个大的对象
    const obj = defineProps({
        xxx: Number,
        filesArray2:Array
    })
    const emits = defineEmits(["update:xxx","update:filesArray2"])// 子触发父的方法并携带参数  最好不要写跟原生事件重名的 比如click

    onMounted(()=>{
        console.log("filesArray2",obj.filesArray2)
    })
    const handler = ()=>{
       let result= obj.filesArray2.map((item)=>{
            return {
                id:item.id,
                money:item.money*10
            }
        })
        emits("update:xxx",obj.xxx+10000)
        emits("update:filesArray2",result)
    }
    const x = reactive({a:'a'})
    const x2 = ref(20)
    /*  watch(obj, (newValue, oldValue) => {
          console.log("xxx新的值:", newValue);
          console.log("xxx旧的值:", oldValue);
      });*/
    /*监听props 传过来的值的变化*/
    watch(() => obj.xxx, (newValue, oldValue) => {
        // console.log(newValue);
        // console.log(oldValue);
    });

</script>

<style scoped>

</style>